<template>
    <view class="paintsquare">
       

        <view class="pad">
        
          
    <u-waterfall v-model="flowList">
	<template v-slot:left="{leftList}">
		<view @tap="jumpPic(item)" class="flow" v-for="(item, index) in leftList" :key="index">
			<image class="f-img" :style="{
                height:'calc(('+screenWidth/2+'px - 20px) * '+item.size1+')'
            }" :src="item.image" />
            <view class="f-text">{{ item.title||'' }}</view>
		</view>
	</template>
    <template v-slot:right="{rightList}">
		<view @tap="jumpPic(item)" class="flow" :style="{
            position: 'relative',
            marginBottom:'14px'
        }" v-for="(item, index) in rightList" :key="index">
			<image class="f-img ml6" 
            :style="{
                // #ifdef MP-WEIXIN
                width:'calc((100vw - 40px)/2)',
                borderRadius:'10px',
                marginLeft:'6px',
                // #endif
                
                height:'calc(('+item.screenWidth/2+'px - 20px) * '+item.size1+')'
            }"

            :src="item.image"/>
            <view class="f-text" :style="{
                 width: '100%',
            position: 'absolute',
            bottom: '0',
            height: '40px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
            }">{{ item.title||'' }}</view>
		</view>
	</template>
</u-waterfall>

<view v-if="isNoMore" class="nomore">没有更多了</view>

    


        </view>
    </view>
    
    </template>
     
    <script>
import {debounce} from '@/utils'

     
    let s;
    export default {
        props: {},
        components:{ },
        data() {
            return {
                isNoMore:false,
                screenWidth:0,
               page:1,
              size:10,
               total:0,
                flowList: [
                    
              
				],
            };
        },
        async created() {
            s = this;
            s.screenWidth = uni.getStorageSync('screenWidth')
           s.getData()
           
        },
        methods: {
            jumpPic(item){
                uni.setStorageSync('pics',JSON.stringify(this.flowList))
                const index = this.flowList.findIndex(function(val){
                return val.id === item.id
            })
                uni.navigateTo({
							url:'/pages/plugin/paint/pic/pic?index='+index,
                            
						})
            },
            chooseTab(idx){
                s.activeIdx = idx
            },
           search(){
            console.log(s.keyword,'aaaa')
           },
            async getData() {
                const r = await s.$u.api.hpaintMy({
                    page:s.page,
                    size:s.size
                });
                if (r) {
                    let temp = r.data.item
                    temp.forEach(item=>{
                        if(item.size){
                            let val = item.size.split(':')
                            item.size1 = val[1]/val[0]
                        }else{
                            item.size1 = 1.5
                        }
                       
                    })
                    this.$nextTick(()=>{
                        console.log(s.flowList,'sfdsfdsf')
                        s.flowList= [...s.flowList,...temp];
                    })
                    s.total = r.data.count
                    
                }
            },

            goBottom(){
                debounce(()=>{
                    if(s.page<s.total/s.size){
                        s.page++
                        s.getData()
                    }else{
                        this.isNoMore = true
                       
                    }
                    console.log('asaaaa')
                })
                
            }
            
        },
    }
    </script>
    <style scoped lang="scss">
.paintsquare{
    color: #fff;
    font-size:24rpx;
   
    
    .first{
        padding: 0 14px;
        .txt1{
            white-space: nowrap;
        }
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .inp{
        border-radius: 20px;
       padding: 8px 10px;
       background:  #2C2C3D;
        margin-left: 10px;
        display: flex;
        justify-content: flex-start;
       
    }
    .inpt{
        width: calc(100% - 30px);
        margin-left: 6px;
    }
    .swiper{
        margin-top: 20px;
    }
    .pad{
        padding: 0 14px;
    }
    .block1{
		white-space: nowrap;
		overflow-x: auto;
		margin:30rpx  0  20rpx;
		.blo7{
			display: inline-flex;
			color: #fff;
			font-size: 28rpx;
			padding-bottom: 12rpx;
			
			margin-right: 0px;
            background: none;
            padding: 3px 14px;
            color: #999;
		}
		.active{
            color: #fff;
            border-radius: 20px;
            background: linear-gradient(to right, #7CD887,#75CCD1);
		}
		
	}
    .flow{
        position: relative;
        margin-bottom: 14px;
        .f-text{
            width: 100%;
            position: absolute;
            bottom: 0;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .f-img{
            border-radius: 10px;
        // #ifdef H5
width: calc(100% - 6px);
// #endif

// #ifdef MP-WEIXIN
width: calc((100vw - 40px)/2);
// #endif

    }
    .ml6{
        margin-left: 6px;
    }

    }
 
}

.nomore{
        text-align: center;
        color: #666;
        font-size: 12px;
        margin: 0 14px;
    }

    </style>